﻿@using System.Text.Json;
@using System.ComponentModel.DataAnnotations;

<FormProvider OnFormFinish="OnFormFinish">
    <Form Model="@_baseFormModel"
          Name="basicForm"
          OnFinish="OnBasicFinish"
          LabelCol="new ColLayoutParam { Span = 8 }"
          WrapperCol="new ColLayoutParam { Span = 16 }">
        <FormItem Label="Group Name">
            <Input @bind-Value="context.GroupName" />
        </FormItem>
        <FormItem Label="User List">
            @if (context.Users.Count > 0)
            {
                <ul>
                    @for (int i = 0; i < context.Users.Count; i++)
                    {
                        <li class="user">
                            <Icon Type="user" />
                            @(context.Users[i].Name) - @(context.Users[i].Age)
                        </li>
                    }
                </ul>
            }
            else
            {
                <Paragraph>
                    <Text Class="ant-form-text">
                        ( <Icon Type="smile" /> No user yet. )
                    </Text>
                </Paragraph>
            }
        </FormItem>
        <FormItem WrapperCol="new ColLayoutParam { Offset = 8, Span = 16 }">
            <Button HtmlType="submit" Type="@ButtonType.Primary">
                Submit
            </Button>
            <Button HtmlType="button" Style="margin: 0 8px" OnClick="ShowUserModal">
                Add User
            </Button>
        </FormItem>
    </Form>

    <Modal Title=@("Basic Drawer")
           Visible="@_modelVisible"
           OnOk="@HandleOk"
           OnCancel="@HideUserModal">
        <Form @ref="@_userForm" Model="@_userFormModel" Layout="@FormLayout.Vertical" Name="userForm">
            <FormItem Label="User Name">
                <Input @bind-Value="@context.Name" />
            </FormItem>
            <FormItem Label="User Age">
                <AntDesign.InputNumber @bind-Value="@context.Age" />
            </FormItem>
        </Form>
    </Modal>
</FormProvider>


@code {
    public class User
    {
        [Required]
        public string Name { get; set; }
        [Required]
        public int Age { get; set; }
    }

    public class UserGroup
    {
        [Required]
        public string GroupName { get; set; }
        [ValidateComplexType]
        public List<User> Users { get; set; } = new List<User>();
    }

    private Form<User> _userForm;
    private User _userFormModel = new User();
    private UserGroup _baseFormModel = new UserGroup();
    private bool _modelVisible = false;

    private void OnFormFinish(FormProviderFinishEventArgs args)
    {
        if (args.FinishForm.Name == "userForm")
        {
            // if you can't get the reference of _userForm and _baseFormModel, you should:
            User user = (User)args.FinishForm.Model;
            UserGroup userGroup = (UserGroup)args.Forms["basicForm"].Model;
 
            userGroup.Users.Add(new User { Name = user.Name, Age = user.Age });

            // if you have the reference of _userForm and _baseFormModel, you can:
            //_baseFormModel.Users.Add(new User { Name = _userFormModel.Name, Age = _userFormModel.Age });
        }
        HideUserModal();
    }

    private void OnBasicFinish(EditContext editContext)
    {
        Console.WriteLine($"Success:{JsonSerializer.Serialize(editContext.Model)}");
    }

    private void HandleOk(MouseEventArgs args)
    {
        _userForm.Submit();
    }

    private void ShowUserModal()
    {
        _modelVisible = true;
    }

    private void HideUserModal()
    {
        _modelVisible = false;
        _userForm.Reset();
    }
}

<style>
    #components-form-demo-form-context .user {
        margin-bottom: 8px;
    }

        #components-form-demo-form-context .user .ant-avatar {
            margin-right: 8px;
        }

    .ant-row-rtl #components-form-demo-form-context .user .ant-avatar {
        margin-right: 0;
        margin-left: 8px;
    }
</style>